<template>
  <div>
    <div>
      <el-dialog title="查看详情" center :visible.sync="dialogVisible" width="50%">
        <div>
          <el-form ref="form" status-icon label-width="auto" style="padding-left: 10px;padding-right: 10px;text-align: left;">
            <el-form-item label=" 问题类型：">{{ row.type }}</el-form-item>
            <el-form-item label=" 问题内容："><el-input type="textarea" :autosize="{ minRows: 4, maxRows: 20 }" :value="row.content"></el-input></el-form-item>
            <el-form-item label=" 创建人：">{{ row.createUser }}</el-form-item>
            <el-form-item label=" 创建时间：">{{ row.createTime }}</el-form-item>
            <el-form-item label=" 被分配人：">{{ row.allot }}</el-form-item>
            <el-form-item label=" 分配时间：">{{ row.allotTime }}</el-form-item>
            <el-form-item label=" 处理人：">{{ row.dellUser }}</el-form-item>
            <el-form-item label=" 处理时间：">{{ row.dellTime }}</el-form-item>
            <el-form-item label=" 处理内容："><el-input type="textarea" :autosize="{ minRows: 4, maxRows: 20 }" :value="row.dell"></el-input></el-form-item>
            <el-form-item label=" 客户反馈："><el-input type="textarea" :autosize="{ minRows: 4, maxRows: 20 }" :value="row.feedback"></el-input></el-form-item>

            <el-form-item label=" 客户满意度：" class="TextVcenter3">
              <el-rate :value="row.satisfied" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" disabled="" text-color="#ff9900" show-score></el-rate>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            @click="dialogVisible = false;row = {};">
            关 闭
          </el-button>
        </span>
      </el-dialog>


      <el-row type="flex">
        <el-col span="6"><el-input v-model="search" placeholder="请输入内容" @keyup.enter.native="handleSearch()"></el-input></el-col>
        <el-col span="6" style="text-align: left;margin-left: 20px;">
          <el-button type="primary" @click='handleSearch()'>搜索</el-button>
        </el-col>
      </el-row>
      <el-table :data="tableData" border stripe="true" style="margin-top: 30px;">
        <el-table-column prop="id" label="编号" align="center"></el-table-column>

        <el-table-column prop="content" label="内容" show-overflow-tooltip="true" align="center"></el-table-column>

        <el-table-column prop="type" label="类型" align="center"></el-table-column>

        <el-table-column prop="satisfied" label="客户满意度" align="center">
          <template slot-scope="scope">
            <el-rate :value="scope.row.satisfied" disabled :colors="['#99A9BF', '#F7BA2A', '#FF9900']" text-color="#ff9900" show-score></el-rate>
          </template>
        </el-table-column>

        <el-table-column prop="handler" label="操作" align="center" width="280px;">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="show(scope.$index, scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        style="margin-top: 20px;"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-size="pageSize"
        background="true"
        layout="total, prev, pager, next"
        :total="totleSize"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'service2',
  data() {
    return {
      tableData: [{}],
      dialogVisible: false,
      userList: [],
      chooseuser: '',
      id: '',
      data: '',
      row: {},
      pageSize: 5,
      currentPage1: 1,
      totleSize: 0,
      search:'',
    };
  },
  components: {},
  mounted() {},
  beforeDestroy() {},
  computed: {},
  methods: {
    getdata() {
      this.getRequest('/service/getStateList?state=已归档&beginPage=' + this.currentPage1 + '&pageSize=' + this.pageSize)
        .then(successResponse => {
          if (successResponse.data.status == 200) {
            this.tableData = successResponse.data.obj;
            this.totleSize = successResponse.data.totleSize;
          } else this.$message.error(successResponse.data.msg);
        })
        .catch(failResponse => {
          this.$message.error('网络不通畅');
        });
    },
    handleCurrentChange(val) {
      this.getdata();
    },
    show(index, row) {
      this.dialogVisible = true;
      this.row = row;
    },
    chooseSure() {
      if (!this.data || !this.statisfi) {
        this.$message.error('满意度 和 反馈结果 不能为空！');
        return;
      }
      this.dialogVisible = false;
      this.postRequest('/service/feedback', {
        feedback: this.data,
        satisfied: this.statisfi,
        id: this.id
      })
        .then(successResponse => {
          if (successResponse.data.status == 200) {
            this.$message.success('处理完成！');
            this.getdata();
          } else this.$message.error(successResponse.data.msg);
        })
        .catch(failResponse => {
          this.$message.error('网络不通畅');
        });
    },
    handleSearch(){
      if (!this.search) {
        this.getdata();
        return;
      }
      this.getRequest('/service/search?content='+this.search)
        .then(successResponse => {
          if (successResponse.data.status == 200) {
            this.$message.success('查询完成！');
            this.tableData=successResponse.data.obj;
          } else this.$message.error(successResponse.data.msg);
        })
        .catch(failResponse => {
          this.$message.error('网络不通畅');
        });
    }
  }
};
</script>

<style></style>
